<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div
                class="score-success-msg"
                v-if="dialogStore.isScoreSuccessMsgVisible"
            >
                <img :src="`${_oss_}images/icon-score.png`" />
                <div class="text">
                    积分&nbsp;+{{ dialogStore.scoreSuccessNum }}
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const dialogStore = useDialogStore();

useContent();
</script>
<style lang="scss" scoped>
.score-success-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #000000, $alpha: 0.7);
    border-radius: 10px;
    user-select: none;
    padding: 20px 0;
    z-index: 9999;

    img {
        display: block;
        width: 30px;
        height: 30px;
        margin: 0 auto;
    }

    .text {
        text-align: center;
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
    }
}
</style>
